 <template>
  <div>
    <header>
      <router-link to="/b1" tag="span"> 裤子 </router-link>
      <router-link to="/b2" tag="span"> 上衣 </router-link>
      <router-link to="/b3" tag="span"> 短裤 </router-link>
    </header>
    <router-view></router-view>
  </div>
</template>
 <script>
export default {
  data() {  
    return {};
  },
  methods: {},
  computed: {},
  beforeRouteLeave(to,from,next){
     console.log("已经离开"+2);
     next()
  },
   beforeRouteUpdate(to, from, next) {
    console.log(3);
    next()
   }
};
</script>
 <style lang='css'>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
header {
  width: 100%;
  height: 5rem;
  border: 1px solid #000;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
}
</style>